<template>
	<view class="nmview">
		<u-popup v-model="mshow" mode="left" @close="close" width="76%" z-index="1000">
			<view class="mpop">
				<view class="mpone">
					<image class="tou2" :src="mineinfo.profile.avatar" />
					<view class="mpright">
						<text class="yxname">邮箱：{{mineinfo.profile.email}}</text>
						<view class="dengview">
							<text class="idnum">ID:{{mineinfo.profile.id}}</text>
							<text class="dengji" v-if="mineinfo.profile.level!=0">{{ mineinfo.profile.level_name }}</text>
						</view>
					</view>
				</view>
				<view class="nmlist">
					<view class="nmitem" v-for="(item,index) in monelist" :key="index" @click="mClick(item)">
						<image class="picon" :src="item.img" />
						<text class="iname">{{item.name}}</text>
						<text class="rval" v-if="item.rcont">{{ item.rcont }}</text>
					</view>
				</view>
				<view class="nmlist">
					<view class="nmitem" v-for="(item,index) in mtwolist" :key="index" @click="mClick(item)">
						<image class="picon" :src="item.img" />
						<text class="iname">{{item.name}}</text>
						<text class="rval" v-if="item.rcont">{{ item.rcont }}</text>
					</view>
				</view>
				<view class="nmlist">
					<view class="nmitem" v-for="(item,index) in mthreelist" :key="index" @click="mClick(item)">
						<image class="picon" :src="item.img" />
						<text class="iname">{{item.name}}</text>
						<text class="rval" v-if="item.rcont">{{ item.rcont }}</text>
					</view>
				</view>

				<view class="tui" @click="gettui">退出</view>
			</view>
		</u-popup>

		<!-- 选择语言 -->
		<view class="yuyan">
			<u-popup v-model="yushow" mode="bottom" z-index="1005">
				<view class="yuview">
					<view class="yuone">
						<text class="yuname">选择语言</text>
						<image class="chaicon" @click="yushow=false" src="/static/mine/chaicon.png" />
					</view>
					<view class="yulist">
						<view class="yuitem" :class="langindex==item.name?'yactive':''" v-for="(item,index) in languagelist" :key="index" @click="languageClick(item,index)">
							<text class="yingyu">{{item.name}}</text>
							<image class="xuans" src="/static/mine/xuans.png" />
						</view>
					</view>
				</view>
			</u-popup>
		</view>
		<!-- 选择汇率 -->
		<view class="yuyan">
			<u-popup v-model="huishow" mode="bottom" z-index="1005">
				<view class="yuview">
					<view class="yuone">
						<text class="yuname">汇率</text>
						<image class="chaicon" @click="huishow=false" src="/static/mine/chaicon.png" />
					</view>
					<view class="yulist">
						<view class="yuitem yactive">
							<text class="yingyu">CNY</text>
							<image class="xuans" src="/static/mine/xuans.png" />
						</view>
						<view class="yuitem">
							<text class="yingyu">USD</text>
							<image class="xuans" src="/static/mine/xuans.png" />
						</view>
						<view class="yuitem">
							<text class="yingyu">USD</text>
							<image class="xuans" src="/static/mine/xuans.png" />
						</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
	
</template>

<script>
export default {
	props: {
		mshow: {
			type: Boolean,
			default: false
		},
		cont:{
			type: String,
			default: ''
		}
	
	},
	name: "Nheader",
	data() {
		return {
			ispayPop: true,
			animat: this.isanimate(),
			monelist:[
				{id:1,name:'安全中心',img:'/static/mine/pone.png'},
				{id:2,name:'邀请返佣',img:'/static/mine/ptwo.png'},
				{id:3,name:'账单管理',img:'/static/mine/pthree.png'},
				{id:4,name:'关联交易',img:'/static/mine/pfour.png'},
			],
			mtwolist:[
				{id:5,name:'语言',img:'/static/mine/pfive.png',rcont:''},
				{id:6,name:'汇率',img:'/static/mine/psix.png'}
			],
			mthreelist:[
				{id:7,name:'日间模式',img:'/static/mine/pseven.png'},
				{id:8,name:'版本',img:'/static/mine/peight.png',rcont:'1.0'}
			],
			yushow:false,
			huishow:false,
			mineinfo:{
				profile:{
					email:'',
					avatar:'',
					id:'',
					level_name:''
				}
			},
			languagelist:{},//语言
			apiinfo:{},
			langindex:''
		};
	},
	created(){
		this.getuserinfo()
		let locale = uni.getStorageSync('locale')
		let mtwolist = this.mtwolist
		let localename = locale.name
		mtwolist[0].rcont = localename
		this.mtwolist = mtwolist
	},
	onShow() {
		// console.log("+++")
	},
	watch: {
		mshow: {
		immediate: true, //立即执行
		deep: true, //深度侦听复杂类型
		handler(newval, oldval) {
			console.log(newval, oldval);
			if (newval) {
				this.getuserinfo()
			}
		}
		}
	},
	methods: {
		async getuserinfo(){
			let res = await this.$u.api.userinfo({
			});
			this.mineinfo = res

			let resd = await this.$u.api.apiconfig({
			});
			this.apiinfo = resd
			this.languagelist = resd.language
		},
		getsou(){
			uni.showToast({
				title: '点击此处',
				icon: 'success'
			})
		},
		leftClick() {
			this.$emit("leftClick");
		},
		connectWallet(){
			
			this.$emit("connectWallet");
		},
		gettantwo(){
			this.$emit("gettantwo");
		},
		gethome(){
			uni.switchTab({ url: '/pages/tabbar/Tabhome' })
		},
		mClick(item){
			let id = item.id
			if(id == 1){
				//安全中心
				this.navrouter("/pages/TPage/AnQuan");
				this.$emit("close");
			}else if(id == 2){
				//邀请返佣
				this.navrouter("/pages/TPage/Yaoqing");
			}else if(id == 3){
				//账单管理
				this.navrouter("/pages/TPage/Zhangdan");
			}else if(id == 4){
				//邀请返佣
			}else if(id == 5){
				//语言
				this.yushow = true
			}else if(id == 6){
				//汇率
				this.huishow = true
			}
		},
		gettui(){
			//退出登陆
			let that = this
			uni.showModal({
				title: '提示',
				content: '确定退出登录？',
				cancelText: "取消", // 取消按钮的文字  
				confirmText: "确认", // 确认按钮的文字  
				// showCancel: false, // 是否显示取消按钮，默认为 true
				// confirmColor: '#f55850',
				// cancelColor: '#39B54A',
				success: (res) => {
				if(res.confirm) {  
					uni.clearStorageSync();
					that.$store.commit('outLogin');
					that.$u.toast('退出成功');
					that.close()
					setTimeout(() => {
						uni.redirectTo({
							url: '/pages/login/login'
						})
					}, 1000);
				} else {  
					console.log('cancel') //点击取消之后执行的代码
					}  
				} 
			})
		},
		close(){
			this.$emit("close");
			// this.mshow  =false
		},
		languageClick(item,index){
			this.langindex = item.name
			let mtwolist = this.mtwolist
			mtwolist[0].rcont = item.name
			this.mtwolist = mtwolist
			this.$i18n.locale = item
			// console.log(this.$i18n.locale)
			uni.setStorageSync('locale',item)
		},
		switchLang(e){
			this.$i18n.locale = e
			// console.log(this.$i18n.locale)
			uni.setStorageSync('locale',e)
		},

	}
}
</script>

<style scoped lang="scss">
.mpop{
	padding: 50rpx 30rpx;
	// #ifdef APP-PLUS
	padding-top: calc(var(--status-bar-height) + 50rpx);;
	// #endif
	.mpone{
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 80rpx;
		.tou2{
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 30rpx;
		}
		.mpright{
			flex: 1;
			display: flex;
			flex-direction: column;
			.yxname{
				font-family: Source Han Sans CN;
				font-weight: bold;
				font-size: 24rpx;
				color: #000000;
			}
			.dengview{
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-top: 10rpx;
				.idnum{
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 24rpx;
					color: #000000;
					display: inline-block;
					margin-right: 13rpx;
				}
				.dengji{
					padding: 5rpx 30rpx;
					background: #FF8004;
					border-radius: 14rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
				}
			}
		}
	}
	.nmlist{
		border-bottom: 2rpx solid  #F7F7F7;
		margin-bottom: 20rpx;
		.nmitem{
			display: flex;
			flex-direction: row;
			padding: 25rpx 0;
			align-items: center;
			.picon{
				margin-right: 11rpx;
				width: 30rpx;
				height: 30rpx;
			}
			.iname{
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 28rpx;
				color: #000000;
			}
			.rval{
				margin-left: auto;
				font-family: Adobe Heiti Std;
				font-weight: normal;
				font-size: 28rpx;
				color: #666;
			}
		}
	}
	.tui{
		margin-top: 100rpx;
		height: 80rpx;
		border-radius: 40rpx;
		border: 1px solid #000000;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: Source Han Sans CN;
		font-weight: 400;
		font-size: 28rpx;
		color: #000000;
	}
}
.yuyan{
	/deep/.u-drawer-bottom{
		background-color: transparent;
	}
	.yuview{
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		.yuone{
			display: flex;
			flex-direction: row;
			align-items: center;
			padding: 35rpx 0;
			border-bottom: 2rpx solid #F7F7F7;;
			justify-content: center;
			position: relative;
			font-family: Source Han Sans CN;
			font-weight: bold;
			font-size: 36rpx;
			color: #000000;	
			.chaicon{
				position: absolute;
				right: 30rpx;
				width: 24rpx;
				height: 24rpx;

			}
		}
		.yulist{
			.yuitem{
				padding: 30rpx 40rpx;
				display: flex;
				flex-direction: row;
				border-bottom: 2rpx solid #F7F7F7;

				.yingyu{
					font-family: Source Han Sans CN;
					font-weight: 400;
					font-size: 30rpx;
					color: #000000;
				}
				.xuans{
					margin-left: auto;
					width: 20rpx;
					height: 20rpx;
					display: none;
				}
			}
			.yactive{
				.xuans{
					display: inline-block;
				}
			}
		}
	}
}
</style>
